<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Progma" content="no-cache"/>
<link type="text/css" href="<%=request.getContextPath() %>/css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/jquery/jquery-ui-1.7.1.custom.js"></script>
<script type="text/javascript">
	/**
	 * 
	 * 提交表时验证用户名和密码
	 *
	 */ 
	function onSubmit() {
		var context = '<%=request.getContextPath()%>';
		// 獲取登陸數據
		var params = $("#LoginAction").serialize();
		// 請求開始時提示消息
		$("#loading").ajaxStart(function(){
			   $(this).dialog({
				   title:"正在登陆.......",
				   modal:true,
				   resizable:false,
				   draggable:false
			   });
		});
		// 請求完成
		 $("#loading").ajaxComplete(function(request, settings){
			 $(this).dialog("destroy");
		});
		// 提交請求
		$.ajax({
			   url: "LoginAction.do",
			   data: params,
			   dataType:"html",
			   success: function (data) {
				   // 獲取錯誤消息
				   var errorMessage = $("li[id!='failureCount']", data);
				   // action消息
				   var actionMessage = $("#failureCount", data);
				   // 消息
				   var message = "";
				   // 如果存在錯誤消息
				   if (errorMessage.length > 0) {
					   // 獲取消息
					   $.each(errorMessage, function (index, node) {
						   message = $(this).text();
					   });
					   // 提示錯誤消息
					   $("<div>" + message + "</div>").dialog({
						   	title:"提示消息",
						   	modal:true,
						   	resizable:false,
						   	draggable:false,
						   	buttons: {
						   		'關閉': function () {
						   			$(this).dialog("destroy");
					   			},
						   		'確定': function () {
					   				$(this).dialog("destroy");
					   			}
					   		}
					   	});
				   } else if (actionMessage.length > 0) { // 如果登陸出現三次密碼錯誤
					   try {
						    // 获取密码输入错误次数
					   		var count = parseInt(actionMessage.text());
					   		// 错误消息
				   			var invalidate = "<s:text name='login.validation.message'/>";
				   		    // 提示錯誤消息
						    $("<div>" + invalidate + "</div>").dialog({
							   	title:"提示消息",
							   	modal:true,
							   	resizable:false,
							   	draggable:false,
							   	buttons: {
							   		'關閉': function () {
							   			$(this).dialog("destroy");
						   			},
							   		'確定': function () {
						   				$(this).dialog("destroy");
						   			}
						   		}
						   	 });
						   	 // 如果输入密码错误次数大于3次
							 if (count > 3) {
								// 刷新验证码
						   		refreshAuthImage();
						   	 }
					   } catch (e) {
						   alert(e.description);
					   }
				   } else {
					   // 登陆成功
					   document.location.href = context + "/manage/index.do?random=" + Math.random();
				   }
			   },
		   	   error: function (data) {
			   	   document.location.href = context + "/error.jsp?random=" + Math.random();
			   }
		});
		// 不提交表单
		return false;
	}

	/**
	 *
	 * 刷新驗證碼
	 *
	 *
	 */
	function refreshAuthImage() {
		try {
			var context = '<%=request.getContextPath()%>';
	   		$("#auth").attr("src",context + "/AuthenticateCodeServlet?random=" + Math.random());
	   		$("#auth").show();
	   		$("#authlink").show();
		} catch (e) {
			alert(e.description);
		}
	}
</script>
<style type="text/css">
	body {
		font-size: 12px;
	}
</style>
<title>用户登陆</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form id="LoginAction" action="<%=request.getContextPath() %>/loginSystem.do"  method="POST" name="LoginForm" enctype="application/x-www-form-urlencoded">
	<table id="LoginTable" width="698" height="467" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="7"><img src="<%=request.getContextPath()%>/images/20070325104428326_01.gif" width="698" height="334" alt=""></td>
		</tr>
		<tr>
			<td rowspan="2"><img src="<%=request.getContextPath()%>/images/20070325104428326_02.gif"
				width="266" height="133" alt="">
			</td>
			<td>
			<input type="text" id="username" name="username" maxlength="50" size="14" value="<s:property value="username"/>"/>
			</td>
			<td rowspan="2"><img src="<%=request.getContextPath()%>/images/20070325104428326_04.gif"
				width="60" height="133" alt=""></td>
			<td>
			<input type="password" id="password" name="password" maxlength="10" size="10" value="<s:property value="password"/>"/>
			</td>
			<td rowspan="2"><img src="<%=request.getContextPath()%>/images/20070325104428326_06.gif"
				width="9" height="133" alt=""></td>
			<td>
			<input type="image" src="<%=request.getContextPath()%>/images/20070325104428326_07.gif" width="91" height="29" alt="登陆" style="cursor: pointer"/>
			</td>
			<td rowspan="2"><img src="<%=request.getContextPath()%>/images/20070325104428326_08.gif" width="43" height="133" alt=""></td>
		</tr>
		<tr>
			<td><img src="<%=request.getContextPath()%>/images/20070325104428326_09.gif" width="114"
				height="104" alt=""></td>
			<td><img src="<%=request.getContextPath()%>/images/20070325104428326_10.gif" width="115"
				height="104" alt=""></td>
			<td><img src="<%=request.getContextPath()%>/images/20070325104428326_11.gif" width="91"
				height="104" alt=""></td>
		</tr>
		<tr>
			<td colspan="3" id="message" style="text-align: center;font-size: 12px; color: red;"> 
				<s:fielderror></s:fielderror>
			</td>
			<td colspan="3" id="message" style="text-align: center;font-size: 12px; color: red;">
			</td>
		</tr>
		<tr>
			<td colspan="3" id="message" style="text-align: center;font-size: 12px; color: red;"> 
				<select name="type" id="type">
					<option value="0">企业</option>
					<option value="1">个人</option>
				</select> 
			</td>
			<td colspan="3" id="message" style="text-align: center;font-size: 12px; color: red;">
			<input type="text" name="authcode" id="authcode" style="display: none;" maxlength="4" size="4"/>
			<a href="<%=request.getContextPath() %>/registion/goRegiste.do">用户註冊</a>
			</td>
		</tr>
	</table>
</form>
<div id="loading" style="color: red; display: none;">loading........</div>
<img id="auth" style="display: none;" src="" width="62" height="22" alt="驗證碼"/><a id="authlink" style="display: none; cursor: pointer;" onclick="refreshAuthImage();">看不清楚?</a>
<s:if test="hasActionMessages()">
	<script type="text/javascript">
		var count = '<s:property value="%{getActionMessages().get(0)}"/>';
		if (count >= 3) {
			refreshAuthImage();
			$("#authcode").show();
		}
	</script>
</s:if>
</body>
</html>